<template>
  <van-field name="uploader" :label="equipFileTitle" class="uploader">
    <div slot="input">
      <van-uploader
        :file-list="fileList"
        :deletable="true"
        max-count="2"
        @afterRead="afterRead"
        @delete="deleteImg"
      />
    </div>
  </van-field>
</template>

<script>
import { deleteFile, queryFile, uploadFile } from "../../../utils/file";
import FormData from "../../../utils/formData.js";
import mpImageCompress from "../fileUpload/common/imageCompress";
export default {
  props: {
    equipFileTitle: {
      type: String,
    },
    equipFileId: {
      type: String,
    },
  },
  data() {
    return {
      fileList: [], // 文件列表 主要存储已上传文件信息
      data: {
        uidList: "",
      }, // 额外参数
      dataInfo: "",
    };
  },
  mounted() {},
  methods: {
    //上传图片
    afterRead(file) {
      const tempFiles = [
        {
          fileType: file.mp.detail.file.type,
          size: file.mp.detail.file.size,
          tempFilePath: file.mp.detail.file.url,
        },
      ];
      const that = this;
      const imgRes = mpImageCompress.set(tempFiles[0].tempFilePath, 500); // 1024K
      console.log(imgRes);
      let formData = new FormData();
      imgRes.then(
        (value) => {
          // console.log(value); //OK
          that.fileList.push({
            url: value.filePath,
            isImage: true,
          });
          formData.append("fatherId", that.equipFileId);
          formData.append("uidList", "123");
          formData.appendFile("fileList", value.filePath);
          const dataInfo = formData.getData();
          wx.request({
            url: "https://www.openrzcl.com/prod-out-api/file/uploadFile",
            method: "POST",
            header: {
              "content-type": dataInfo.contentType,
              Authorization: wx.getStorageSync("token"),
            },
            data: dataInfo.buffer,
            success(res) {
              if (res.code == 200) {
                wx.showToast({
                  title: "图片上传成功",
                  icon: "none",
                });
              } else {
                wx.showToast({
                  title: res.msg,
                  icon: "none",
                });
              }
            },
          });
        },
        (reason) => {
          console.warn(reason);
        }
      );
      // wx.chooseMedia({
      //   count: 1,
      //   mediaType: ["image"],
      //   sourceType: ["album", "camera"],
      //   sizeType: ["original", "compressed"],
      //   async success(res) {
      //     const info = res.tempFiles[0];
      //     console.log(res);
      //     // 选择文件后调用图片压缩接口进行压缩。如果选取的图片没有达到指定的大小，将返回原图
      //     const imgRes = await mpImageCompress.set(info.tempFilePath, 500); // 1024K
      //     console.info(imgRes);
      //     if (imgRes) {
      //
      //     }
      //   },
      // });
    },
    deleteImg(event) {
      let list = this.fileList;
      list.splice(event.mp.detail.index, 1);
      this.fileList = list;
    },
    queryFile() {
      queryFile({
        fatherId: this.equipFileId,
      })
        .then(({ code, message, data }) => {
          this.fileList = data || [];
        })
        .catch((err) => {
          this.fileList = [];
        });
    },
    async uploadFile(data) {
      try {
        let res = await uploadFile(data);
        console.log(res);
      } catch (error) {
        console.log(error);
      }
    },
  },
  watch: {
    equipFileId: {
      handler() {
        if (this.equipFileId) {
          this.queryFile();
        }
      },
      immediate: true,
    },
  },
};
</script>

<style scoped>
.uploader >>> .van-field__control--custom {
  min-height: 88px;
  width: 100%;
}
.van-uploader__upload input {
  margin: 0;
  padding: 0;
  width: 100%;
}
</style>